<template>
  <div class="users">
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户信息</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card>
      <el-table :data="userinfo" style="width: 100%" border>
        <el-table-column prop="id" label="id" width="180">
        </el-table-column>
        <el-table-column prop="username" label="用户名" width="350">
        </el-table-column>
        <el-table-column prop="usertitle" label="角色" width="350">
        </el-table-column>
        <el-table-column label="操作">
          <el-button type="info" icon="el-icon-edit" @click="showModifyDialog">修改密码</el-button>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 修改密码的对话框 -->
    <el-dialog title="修改密码" :visible.sync="modifyDialogVisible" width="30%"
    @close="modifyDialogClosed">
      <el-form :model="changePwdForm" :rules="changePwdFormRules" ref="changePwdFormRef" label-width="140px">
        <el-form-item label="请输入原密码" prop="password">
          <el-input v-model="changePwdForm.password" type="password"></el-input>
        </el-form-item>
        <el-form-item label="请输入新密码" prop="passwordS">
          <el-input v-model="changePwdForm.passwordS" type="password"></el-input>
        </el-form-item>
        <el-form-item label="再次输入新密码" prop="passwordSS">
          <el-input v-model="changePwdForm.passwordSS" type="password"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="modifyDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="changePwd">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        //用户信息
        userinfo: [],
        //修改密码的表单数据
        changePwdForm: {
          password: '',
          passwordS: '',
          passwordSS: ''
        },
        modifyDialogVisible: false,
        //修改密码表单验证规则
        changePwdFormRules: {
          password: [{
              required: true,
              message: '请输入原密码',
              trigger: 'blur'
            },
            {
              min: 6,
              max: 18,
              message: '长度在 6 到 18 个字符',
              trigger: 'blur'
            }
          ],
          passwordS: [{
              required: true,
              message: '请输入新密码',
              trigger: 'blur'
            },
            {
              min: 6,
              max: 18,
              message: '长度在 6 到 18 个字符',
              trigger: 'blur'
            }
          ],
          passwordSS: [{
              required: true,
              message: '请再次输入新密码',
              trigger: 'blur'
            },
            {
              min: 6,
              max: 18,
              message: '长度在 6 到 18 个字符',
              trigger: 'blur'
            }
          ]
        }
      }
    },
    created() {
      this.getUserinfo()
    },
    methods: {
      async getUserinfo() {
        const {
          data: res
        } = await this.$http.get('/userinfo')
        this.userinfo.push(res.userinfo)
      },
      changePwd() {
        this.$refs.changePwdFormRef.validate(async valid => {
          if(!valid) return
          const {
            data: res
          } = await this.$http.post('/userinfo/modify', this.changePwdForm)
          if(res.status === 0) {
            return this.$message.error('原密码不正确！')
          } else if(res.status === 1) {
            return this.$message.error('两次密码不一致！')
          }
          this.modifyDialogVisible = false
          this.$message.success('密码修改成功！')
        })
      },
      //展示修改密码的对话框
      showModifyDialog() {
        this.modifyDialogVisible = true
      },
      //监听修改密码对话框的关闭事件
      modifyDialogClosed() {
        this.$refs.changePwdFormRef.resetFields()
      }
    }
  }
</script>

<style>
</style>
